<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.box{
    width: 400px;
    height: 500px;
    margin-left:100px;
    /* border:3px solid #00f; */
}
.m{
    width: 400px;
    height: 400px;
    /* border:1px solid #000; */
    position: relative;
}
.small ul li{
    margin:0 5px;
    border:1px solid #0f0;
}
.small ul li img{
    vertical-align: middle;
}
.small ul{
    width: 400px;
    height: 100px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
}
.small ul li.active{
    border-color:#f00;
}
.shade{
    width: 100px;
    height: 100px;
    background:rgba(255,255,0,0.5);
    position: absolute;
    left:0;
    top: 0;
    display:none;
}
.big{
    width: 400px;
    height: 400px;
    position:absolute;
    left:105%;
    top:0;
    border:solid;
    background-image:url("./images/big1.jpg");
    background-size:1600px 1600px;
    display:none;
    background-repeat:no-repeat;
}
.middle{
    width: 400px;
    height: 400px;
    border:1px solid #000;
    position:absolute;
    left:0;
    top:0;
}
.middle img{
    height: 100%;
    width: 100%;
}
.shade:hover{
    cursor:move;
}
*/
</style>
<body>
    
    <div style="height:300px;background:red;line-height: 300px;text-align: center;font-size: 60px">欢迎小米官网</div>
<div class="box">
    <div class="m">
        <div class="middle">
            <img src="./images/xm (30).jpg" alt="">
            <div class="shade"></div>
        </div>
        <div class="big"></div>
    </div>
    <div class="small">
        <ul>
            <li class="active"><a href="#"><img src="./images/xm (30).jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/xm (31).jpg" alt=""style="img:100%"></a></li>
        </ul>
    </div>
</div>
</body>
<script src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function Enlarge(classname){
    this.box = $("."+classname);
    this.m = $("."+ classname +" .m");
    this.middleImg = $("."+classname+" .m img");
    this.middle = $(".middle");
    this.shade = $(".shade");
    this.ulis = $("ul li");
    this.big = $(".big");
    var _this = this;
    this.middle.mouseenter(function(){
        _this.over();
    });
    this.middle.mouseleave(function(){
        _this.out();
    });
    this.ulis.click(function(){
        _this.click(this);
    });
    
}
Enlarge.prototype.click = function(ele){
    $(ele).css("borderColor","#f00").siblings().css("borderColor","#0f0");
    var smallPath = $(ele).children().first().children().first().attr("src");
    var lastIndex = smallPath.lastIndexOf(".");
    var suffix = smallPath.slice(lastIndex-1);
    var middlePath = "./images/middle" + suffix;
    this.middleImg.attr("src",middlePath);
    var bigPath = "./images/big"+suffix;
    this.big.css("backgroundImage","url("+bigPath+")");
}
Enlarge.prototype.out = function(){
    this.shade.css("display","none")
    this.big.css("display","none");
}
Enlarge.prototype.over = function(){
    this.shade.css("display","block")
    this.big.css("display","block");
    var _this = this;
    this.middle.mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
        var l = x - _this.box.offset().left - $(this).position().left - _this.shade.width()/2;
        if(l<=0){
            l=0;
        }
        if(l>=$(this).width() - _this.shade.width()){
            l=$(this).width() - _this.shade.width()
        }
        _this.shade.css("left",l+"px");
        var t = y - _this.box.offset().top - $(this).position().top - _this.shade.height()/2;
        if(t<=0){
            t = 0;
        }
        if(t>=$(this).height() - _this.shade.height()){
            t=$(this).height() - _this.shade.height()
        }
        _this.shade.css("top",t+"px");
        _this.fangda(l,t);
    });
}
Enlarge.prototype.fangda = function(l,t){
    var w = this.middle.width();
    var percentw = l/w;
    var style = this.big.css("backgroundSize");
    var bigW = parseInt(style.split(" ")[0]);
    var bigL = percentw * bigW;
    var h = this.middle.height();
    var percenth = t/h;
    var bigH = parseInt(style.split(" ")[1]);
    var bigT = percenth * bigH;
    this.big.css("backgroundPosition",`-${bigL}px -${bigT}px`);
}
var enlarge = new Enlarge("box");
</script>
</html>